<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位小技巧(二)</title>
    <style>
        .mask {
            /* 带透明度的背景色 */
            background-color: rgba(0,0,0,0.3);
            position: fixed;
            /* 使用固定定位 紧贴参照物html页面的4个边 铺满整个html屏幕 */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .mask:hover {
            /* 让元素在文档流中消失 释放布局空间 */
            display: none;
            /* 不会释放原有元素的布局空间 只是缩放到不可视状态 */
            transform: scale(0);
        }
    </style>
</head>
<body>
<!-- 遮盖层 -->
<div class="mask"></div>

<!-- 网页内容: lorem*60 -->
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus assumenda deleniti dignissimos, enim fuga
        minus nobis recusandae! Dolor eos error excepturi molestias nobis nostrum quae, rem velit? Dignissimos, modi
        odit!
    </div>
    <div>Asperiores debitis ipsum odio quia quibusdam soluta sunt. Alias cupiditate esse iusto laborum quae
        reprehenderit saepe sequi sunt voluptate voluptatem! Aut inventore minus nemo nihil obcaecati quas repellat
        sapiente! Aspernatur.
    </div>
    <div>Amet dignissimos distinctio dolore eaque est, exercitationem fugiat harum id impedit iure iusto libero magnam
        minima molestiae necessitatibus nobis officia omnis porro qui quis quod reiciendis repellat reprehenderit
        tempora unde.
    </div>
    <div>Aspernatur debitis error expedita minus obcaecati suscipit, tempora voluptas. Ab ad aliquid autem doloremque ea
        ipsam, laboriosam maiores modi nulla obcaecati perspiciatis quo quos rerum similique suscipit, tempora, unde
        veniam.
    </div>
    <div>Aut, corporis debitis dignissimos distinctio inventore ipsa iure laboriosam magnam, nihil nostrum obcaecati
        possimus praesentium quia quis rem rerum saepe, sit suscipit voluptate voluptatum! Aspernatur assumenda dolorem
        eveniet natus optio.
    </div>
    <div>Animi architecto corporis cum, dicta dolor doloribus ducimus est facilis id impedit iste magni maiores maxime
        nihil nobis obcaecati quae quam quo sequi similique sint ullam vel voluptatibus. Atque, id.
    </div>
    <div>Alias architecto consequatur debitis, ea exercitationem fugiat, iure magnam magni minima molestiae neque
        possimus quae reiciendis tempore ut veritatis voluptas. Atque dolore ipsum itaque magni molestias odit quas
        repellendus suscipit.
    </div>
    <div>Accusamus accusantium, assumenda blanditiis consectetur cum debitis dolore dolorem ducimus esse excepturi
        expedita, fugiat iusto labore magnam maxime minima mollitia neque nulla perspiciatis placeat porro ratione sequi
        sint tenetur voluptas!
    </div>
    <div>Animi dolorem eum expedita recusandae, temporibus ullam. Blanditiis commodi eos inventore iure magni maiores
        numquam optio possimus, quas quisquam ratione rem reprehenderit, voluptatibus? Aperiam dolore id nam odio
        quaerat veniam.
    </div>
    <div>Autem ducimus eum eveniet excepturi nostrum odio quibusdam, saepe similique suscipit totam. Debitis doloremque,
        dolorum ducimus eos iure laboriosam nam, neque perferendis perspiciatis quia quos repellat veniam voluptates.
        Aliquid, tempora.
    </div>
    <div>Accusamus aliquid aut blanditiis consequatur deleniti doloremque dolorum eligendi, illo incidunt itaque iusto
        laborum laudantium magnam molestiae nam nemo non nulla omnis porro praesentium quibusdam quis quo ratione
        reprehenderit voluptates.
    </div>
    <div>Deserunt dolores illo necessitatibus nulla quaerat quibusdam rem repellat, reprehenderit velit veritatis! At,
        consequatur dolore eos eveniet illum iure maiores minus provident quia, recusandae, sunt tempora tenetur?
        Inventore, omnis repellat.
    </div>
    <div>Aliquam at commodi consectetur cumque exercitationem illum inventore ipsa labore laudantium maxime molestias
        necessitatibus numquam odit officia praesentium quam qui quisquam quo, recusandae reprehenderit sapiente sed
        temporibus, unde veritatis voluptatibus?
    </div>
    <div>Aliquid autem, deleniti dicta dolor magni molestiae praesentium totam velit vero voluptas. Dicta, dolorem
        error, ipsam ipsum magnam nesciunt nisi perferendis quam quia, quis ratione reiciendis sunt unde. Earum, velit!
    </div>
    <div>Architecto autem eaque, eos error eveniet incidunt ipsam, iste minima porro, quasi qui quisquam ratione soluta?
        Ad aperiam excepturi illo illum in ipsum, laudantium molestias necessitatibus odit quas repellendus similique.
    </div>
    <div>A asperiores, aspernatur atque deserunt, eos error eum fuga fugit hic, ipsam mollitia nemo neque nesciunt optio
        repellat tenetur voluptatibus. Consequatur consequuntur dolore eum impedit in natus necessitatibus officiis
        perspiciatis.
    </div>
    <div>Cum distinctio ducimus iusto necessitatibus nulla quis quisquam repellat reprehenderit tempora voluptatum! Esse
        facilis illo sit? Ab at dignissimos doloremque ducimus, enim fuga ipsam nesciunt nisi reiciendis veniam! Magnam,
        voluptatum.
    </div>
    <div>Adipisci at aut consequuntur culpa dolores est facere harum, minima non odio, provident quibusdam repellat
        repellendus sit veritatis vitae voluptas. Asperiores facilis illum iure maiores. Harum impedit perspiciatis qui
        voluptatibus?
    </div>
    <div>Consectetur debitis earum eligendi impedit maxime nisi pariatur recusandae similique totam voluptatibus?
        Aliquid, atque cum debitis esse eum ex in ipsum modi non quae rem totam unde ut vel voluptatem?
    </div>
    <div>A alias atque consequatur dolorum enim error, eum facilis illo illum iste itaque maxime nobis provident quod,
        soluta suscipit tempora ullam? Accusamus dolorem explicabo illum quasi quos, reprehenderit tempore vel.
    </div>
    <div>Accusamus blanditiis dignissimos dolorum expedita, fuga fugiat minus necessitatibus nihil optio quam ratione
        veniam voluptatibus! Culpa delectus dolor ex facilis laudantium numquam quis quos recusandae temporibus ullam
        vel veritatis, voluptates.
    </div>
    <div>Alias aperiam aspernatur at, culpa debitis eaque excepturi exercitationem expedita id ipsam ipsum magnam,
        molestiae necessitatibus, nesciunt nobis non nulla perspiciatis quibusdam reprehenderit tempore. Ducimus quidem
        quis totam ullam voluptatum.
    </div>
    <div>Expedita, explicabo ipsam itaque natus nihil porro recusandae soluta unde? Accusamus aliquid aperiam asperiores
        autem doloribus impedit magni necessitatibus nemo nulla odio reiciendis rem saepe, ut? Dolorem expedita nobis
        tenetur.
    </div>
    <div>Ab accusamus, ad adipisci amet aperiam assumenda commodi cupiditate distinctio, dolorum eius fugit magni
        molestiae obcaecati optio quaerat quibusdam quis recusandae repellendus reprehenderit saepe suscipit vel vitae
        voluptatem voluptatibus voluptatum.
    </div>
    <div>Consectetur consequuntur cupiditate distinctio, dolorem fugiat, id laboriosam laborum laudantium minima, minus
        molestias quisquam sed suscipit tempora ut! A culpa cum doloribus praesentium quae. Accusantium aut beatae
        expedita in placeat.
    </div>
    <div>Accusamus blanditiis consectetur consequuntur corporis delectus earum eos, est eum eveniet fuga id impedit
        incidunt maiores minus natus nostrum officia, officiis quae quaerat quas quasi quo, similique suscipit veniam
        voluptatibus!
    </div>
    <div>Amet optio quidem quisquam quod temporibus. Alias commodi delectus dicta dolores dolorum eos facere hic
        impedit, laboriosam libero minus mollitia natus nisi quibusdam reprehenderit saepe sint sit voluptatum! Quam,
        tempore!
    </div>
    <div>Atque deleniti dignissimos, doloribus ducimus expedita ipsa laboriosam nihil numquam provident, qui, ratione
        repellat sequi voluptatibus? Adipisci distinctio dolore ducimus ea, fugit laudantium molestiae molestias numquam
        officiis placeat, quaerat repellendus.
    </div>
    <div>Assumenda aut autem eaque error laborum nesciunt odio, possimus quibusdam repudiandae? Commodi dolore eos
        facilis fuga id illo itaque maxime molestias mollitia natus nesciunt odit, quibusdam quo sapiente, similique,
        sit?
    </div>
    <div>Consequatur esse in minima pariatur provident. Ad animi aspernatur assumenda cum deserunt, ducimus eaque
        eveniet facilis illum in ipsam, iure nisi nulla, odio quae quo similique tenetur unde vel vero.
    </div>
    <div>Excepturi, expedita unde! Accusamus ad atque consequatur cumque deleniti dolores, dolorum earum enim eum
        facilis fugit itaque iure laborum molestiae non possimus praesentium provident quaerat quas, quasi recusandae
        reprehenderit repudiandae?
    </div>
    <div>Aperiam aspernatur, deleniti deserunt dolorum eius eum eveniet impedit itaque laudantium magnam, maiores
        molestias obcaecati perferendis perspiciatis, quod! Aspernatur eius et fugiat incidunt inventore ipsum magni
        nemo quisquam, totam ut?
    </div>
    <div>Asperiores corporis, deleniti dolores earum eius incidunt inventore ipsa, neque numquam optio repellat tenetur.
        Ducimus labore, magni molestias praesentium quibusdam sit? Blanditiis cupiditate expedita illum officiis quaerat
        saepe, sit unde.
    </div>
    <div>Deleniti doloremque error natus quibusdam? Adipisci corporis dolore hic ipsa, labore modi non perspiciatis
        temporibus veritatis voluptatem. Consectetur consequatur ea fuga ipsam magni maxime molestiae, nemo quidem
        repellendus reprehenderit rerum.
    </div>
    <div>At commodi, consectetur cupiditate deleniti deserunt dicta dolor dolore dolorem dolorum eum fuga hic
        necessitatibus neque non nostrum obcaecati odit pariatur perferendis quasi quibusdam similique sint suscipit,
        ullam vitae voluptates?
    </div>
    <div>Quam, quibusdam, temporibus! Asperiores aspernatur aut culpa, dicta dolorem eum explicabo ipsum neque odit
        provident quam quisquam ullam voluptatum. Accusamus cupiditate dolorem ducimus incidunt nesciunt nihil suscipit
        totam ullam veniam.
    </div>
    <div>Ad assumenda consectetur consequatur delectus, eveniet exercitationem iste labore maxime modi mollitia qui,
        quis quod rerum sed sunt tempora veniam? Ad amet, at eligendi est id iusto placeat similique voluptates?
    </div>
    <div>A at blanditiis, consequuntur deserunt dicta dolores eos facilis fuga illo magni maiores minus molestiae
        mollitia nesciunt odio officiis placeat quae quam quas quasi qui quia quisquam quos ratione repellendus.
    </div>
    <div>Beatae commodi corporis cumque dignissimos dolor eaque eius eligendi est eveniet expedita harum ipsum labore
        maiores mollitia nesciunt porro quam quisquam ratione recusandae, rem sapiente sequi sint sunt suscipit unde?
    </div>
    <div>Cupiditate dolorem fuga fugit itaque nam nobis non reprehenderit suscipit voluptatum? Ad et facilis minima
        obcaecati tenetur? Cupiditate debitis distinctio laboriosam mollitia possimus repellat saepe tempora! Doloribus
        harum possimus rem!
    </div>
    <div>Aut consectetur dignissimos, dolores eveniet hic impedit nihil, optio, quas recusandae reprehenderit tempore
        tenetur unde veniam. Adipisci blanditiis deserunt dolore ducimus eligendi incidunt magnam pariatur quas sequi
        sit, ullam ut?
    </div>
    <div>Debitis eveniet impedit minus obcaecati officiis optio sapiente similique ullam. Blanditiis dolorum, excepturi
        impedit iste maiores mollitia nam nostrum, nulla perspiciatis repellendus reprehenderit temporibus voluptas
        voluptatem. Aperiam natus quis recusandae.
    </div>
    <div>Debitis dignissimos eius repellat unde! Delectus esse excepturi optio perspiciatis placeat repudiandae tenetur
        vel voluptate. Ab cumque et, hic itaque saepe suscipit unde voluptatum! Consequuntur dolores fuga impedit
        sapiente sed.
    </div>
    <div>Ad, culpa cum cumque eum facere maiores neque omnis tempora ullam vero. A animi ipsum laborum nisi odit
        perspiciatis possimus provident quia sed, sequi, sit tenetur? Ea eaque minus placeat?
    </div>
    <div>Accusantium consectetur cumque cupiditate delectus deleniti distinctio dolorum ducimus earum eligendi eum
        exercitationem impedit ipsum itaque iure iusto modi, nesciunt nostrum omnis optio porro provident rerum tenetur
        ut veritatis, voluptates!
    </div>
    <div>Commodi consequuntur corporis dolorem quas similique! Impedit nam non quia ratione sed sint soluta tempora
        unde! Cupiditate dignissimos incidunt iusto molestiae numquam placeat quas quidem quos sint! Ex, ipsam iure.
    </div>
    <div>Aperiam debitis error esse laudantium nihil repellat? Accusamus accusantium alias aliquam, asperiores
        blanditiis culpa dolor doloremque ducimus esse eum eveniet facere molestias mollitia nemo, nulla officiis quam
        quod tempora, totam?
    </div>
    <div>Accusamus aliquid asperiores aut cumque debitis deserunt dicta doloremque fugit iusto, magnam modi non odio
        officia pariatur quae quis, ratione repellat sapiente sequi, temporibus totam unde velit veritatis vitae
        voluptas.
    </div>
    <div>Architecto assumenda consequuntur dolorum eaque eveniet explicabo fugiat iure maiores modi molestiae nam nobis
        nulla pariatur quaerat sapiente tempora, ut veritatis. Debitis inventore ipsum neque odit officia quisquam totam
        vitae?
    </div>
    <div>Aliquam architecto asperiores consectetur cum cumque debitis, doloribus esse et ex fugiat ipsum labore modi
        nemo nisi nulla porro quae quibusdam recusandae sequi sint tempora tempore temporibus tenetur vel voluptatibus!
    </div>
    <div>Alias assumenda commodi cumque ea error iste natus, nemo ullam vitae voluptatem. Ad aspernatur dicta eos
        exercitationem explicabo fuga hic illo inventore necessitatibus nihil pariatur placeat quam, ratione reiciendis
        voluptatum?
    </div>
    <div>Accusantium autem beatae, consequatur culpa cumque distinctio dolorem ducimus eaque error fugit hic id iste
        magnam, modi molestiae nihil perspiciatis, porro quaerat quis repellat similique soluta suscipit velit vero
        voluptatum?
    </div>
    <div>Adipisci aut, dolorum earum fuga impedit iusto maxime, nam nobis praesentium quaerat ut, veniam! Beatae dolore
        fugiat ipsum itaque perferendis tenetur vitae voluptas. Atque excepturi magni quidem! Exercitationem impedit,
        perspiciatis.
    </div>
    <div>Dolor enim ex magni odit quas quo veritatis vero? Ad beatae blanditiis corporis cupiditate delectus, distinctio
        dolor esse harum illum libero natus nobis porro quis quo repudiandae rerum vero voluptas!
    </div>
    <div>Ad cumque, delectus deleniti enim impedit inventore laboriosam magni, minus molestiae natus numquam
        perspiciatis quae quasi similique, unde? Asperiores debitis dolore eveniet laborum modi nihil nobis nulla
        perspiciatis quas sint!
    </div>
    <div>Commodi consectetur corporis dolor earum et excepturi hic itaque magni molestiae nostrum optio quam quod, rerum
        sequi tempora voluptate voluptatum? Asperiores fugiat id, labore libero minus quo suscipit. Earum, enim.
    </div>
    <div>Aliquam, amet assumenda eum illo in modi odit quo quod tempora. Aliquam consequatur enim facilis fugit ipsa
        molestias nam nobis quia quis. At cupiditate dolores, est mollitia omnis possimus sed.
    </div>
    <div>Ab ad aspernatur blanditiis corporis cum delectus deleniti dicta distinctio doloremque dolores, ducimus ea
        eaque eligendi expedita id laborum nam nostrum quam quidem rerum sed sit temporibus unde ut vitae?
    </div>
    <div>Assumenda, aut, veritatis. Accusamus accusantium cumque, exercitationem facere harum incidunt inventore,
        possimus praesentium rem repudiandae totam voluptatibus. Ad, at autem culpa error eum eveniet minima, nesciunt
        nulla officiis quisquam quos?
    </div>
    <div>Alias, aut dolor doloremque eligendi facere iusto laboriosam porro possimus! Atque deleniti dolor doloribus
        eveniet harum incidunt, iure, magnam maxime minima minus, qui reiciendis rerum ut. Possimus rem rerum sed.
    </div>
</div>
</body>
</html>